import React from "react";
import ReactEcharts from "echarts-for-react";

// 假设这是你的数据
const data = [
  { name: "Apple", value: 335 },
  { name: "Banana", value: 310 },
  { name: "Orange", value: 234 },
  { name: "Pear", value: 435 },
  { name: "Grape", value: 748 }
];



// 这是一个柱状图组件
const BarChart = () => {
  // 这是echarts需要的数据格式
  const option = {
    title: {
      text: "Fruits",
      subtext: "A simple bar chart example",
      left: "center"
    },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: ["Fruits"]
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.name) // 提取数据中的name作为x轴的类别
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        type: "bar",
        data: data.map((item) => item.value) // 提取数据中的value作为y轴的数值
      }
    ]
  };

  // 返回一个echarts组件
  return <ReactEcharts option={option} />;
};


const DataChart = () => {
  // 使用flex布局来控制图表的换行
  return (
    <div  style={{width:"80%",margin:"auto"}}>
      <div>
        <BarChart />
      </div>
    </div>
  );
};





export default DataChart;
